1. display：inline-block元素放到一起会产生一段空白 原因？解决方法？

   原因：标签间的空白。

2. 伪类和伪元素 伪类：表示文档元素的额外信息，用来为选择器添加特殊效果。形式为单冒号。例如 :hover、:active、:focus
   伪元素：用来表示文档中不存在的元素。形式为双冒号。例如：::before、::after

3. 如何实现小于 12px 的字体效果

   display: inline-block; // transform: scale只能缩放可以设置宽度的元素 transform: scale(0.7);

4. 如何使用 css 实现硬件加速

   硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能。

   transform: translateZ(0);

5. 为什么 css 是从右向左解析的？

   • 首先明确渲染过程，生成 dom 树和 css 树后，两者开始结合，结合过程中遍历 dom 树中的每个节点，并在 css 树中查找到对应的样式规则，最终生成 render 树。
   • 查找对应样式的过程可能有两种：
     • 从左向右。假设这样查找，也就是从父节点向子节点查找，而每个父节点通常有多个子节点，找到目标节点前很可能已经尝试过其它子节点，这就造成了效率问题。
     • 从右向左。虽然可能有多个子节点与目标节点同名，但是在节点数众多的情况下，还是从右向左更高效一些。

6. @import vs. link

   • 从属关系：@import 为 css 语法规则，只能导入样式；link 是 html 标签，除了引入样式，还可以实现域名预解析等（<link rel="dns-prefetch" href="//www.test.com">）

   • 兼容性：@import 为 css2.1 才有的语法，不兼容低版本浏览器(如 IE 5-)；link 是 html 标签，不存在兼容性问题

   • 加载顺序：@import 在页面加载完成后才加载，而 link 是异步的，会与页面一同加载。